<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Class Style</title>
	<script src="lib/vue-2.1.3-min.js"></script>
	<script src="lib/lodash.min.js"></script>
	<style>
		.boldTitle {
			font-size: 16px;
			font-weight: bold;
			color: #009900;
		}

		.application-title{
			background: #ccc;
			border: 1px solid red;
		}

		.error {
			background: blue;
		}
	</style>
</head>
<body>
	<div id="cls">
		<p v-bind:class="{boldTitle: isActive}">vue bind class and style.</p>
		
	</div>
	<script>
		var vm = new Vue({
			el: "#cls", 
			data: {
				isActive: true
			}
		})
	</script>

	<div id="cls2">
		<p v-bind:class="classObject">class object.</p>
		
	</div>
	<script>
		var vm = new Vue({
			el: "#cls2", 
			data: {
				classObject: {
					boldTitle: true,
					"application-title": true
				}
			}
		})
	</script>

	<div id="cls3">
		<p v-bind:class="classObject">computed object.</p>
		
	</div>
	<script>
		var vm = new Vue({
			el: "#cls3", 
			data: {
				isActive: true,
				error: {falt : "danger"}
			},
			computed: {
				classObject: function() {
					return {
						"boldTitle": this.isActive,
						"error": this.error && this.error.falt === "danger"
					}
				}
			}
		})
	</script>

	<div id="style">
		<p v-bind:style="styleObject">styleObject object.</p>
		
	</div>
	<script>
		var vm = new Vue({
			el: "#style", 
			data: {
				styleObject: {
					fontSize: "20px", 
					color: "red"
				}
			}
			
		})
	</script>
</body>
</html>